<template>
    <div id="rebate">
        <div class="navbar">
            申请返利
        </div>
        <div class="placeholder"></div>
        <div class="type-tab">
            <ul>
                <li :class="{active:tab==0}" @click="change(0)">
                    返利申请
                </li>
                <li :class="{active:tab==1}" @click="change(1)">
                    申请记录
                </li>
                <li :class="{active:tab==2}" @click="change(2)">
                    返利指南
                </li>
            </ul>
        </div>
        <div class="warn" v-show="tab!==2">
            <p>
                请在充值后的一周内提交返利，过期将无法提交。
            </p>
            <p>
                如有疑问，请联系客服。
            </p>
        </div>
        <div class="container">
            <div class="apply" v-if="tab==0">
                <scroll  v-if="applyList.length" ref="scroll" 
                :data="applyList" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getApply">
                    <div class="list" v-for="(item,index) in applyList" :key="index" @click="goApply(item)">
                        <div class="list-l">
                            <div class="avator">
                                <img v-lazy="item.game_icon" alt="" :key="item.id">
                            </div>
                            <div class="info">
                                <div class="name">{{item.gamename}}</div>
                                <div class="num">+{{item.total}}</div>
                            </div>
                        </div>
                        <div class="list-r">
                            <div class="user">{{item.date | filtertimestamp}}</div>
                            <div class="btn">申请返利</div>
                        </div>
                    </div>
                </scroll>
                 <!-- 没有数据 -->
                <noData v-else :title="'暂无可申请的返利'"></noData>
                 <!-- 下拉加载显示 -->
                <div class="loadlist" v-show="applyList.length">
                    <loadinglist :row="row"  :more="more"></loadinglist>
                </div>
            </div>
            <div class="record" v-if="tab==1">
                <scroll  v-if="recordList.length" ref="scroll" 
                :data="recordList" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getRecord">
                    <div class="list" v-for="(item,index) in recordList" :key="index">
                        <div class="time" >
                            {{item.recharge_time}}
                        </div>
                        <div class="game" v-for="(list,index) in item.gameLists" :key="index" @click="goRecord(item.recharge_time,list)">
                            <div class="avator">
                                <img v-lazy="list.game_icon" alt="" :key="list.id">
                            </div>
                            <div class="msg">
                                <div class="msg-l">
                                    <div class="name">
                                        {{list.game_name}}
                                    </div>
                                    <div class="area">
                                        区服:{{list.server}}
                                    </div>
                                    <div class="role">
                                        角色:{{list.role_name}}
                                    </div>
                                </div>
                                <div class="status">
                                    <span class="wait" v-if="list.status==1||list.status==4"></span>
                                    <span class="success" v-else-if="list.status==2"></span>
                                    <span class="fail" v-else></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroll>
                 <!-- 没有数据 -->
                <noData v-else :title="'暂无申请记录'"></noData>
                <!-- 下拉加载显示 -->
                <div class="loadlist" v-show="recordList.length">
                    <loadinglist :row="row"  :more="more"></loadinglist>
                </div>
            </div>
            <div class="guide" v-if="tab==2">
                <p class="line"></p>
                <ul class="guide-tab">
                    <li :class="{active:guideTab==0}" @click="handleTab(0)">
                        <span>图文教学</span>
                    </li>
                    <li :class="{active:guideTab==1}" @click="handleTab(1)">
                        <span>常见问题</span>
                    </li>
                </ul>
                <div class="img" v-show="guideTab==0">
                    <img src="../../assets/image/guideImg.jpg" alt="">
                </div>
                <div class="text" v-show="guideTab==1">
                    <van-collapse v-model="activeNames">
                        <van-collapse-item  :name="index+1" v-for="(item,index) in guideList" :key=index>
                            <div slot="title">{{item.title}}</div>
                            {{item.content}}
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </div>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import {getGuide,record,apply} from 'api/game_box'
    import {formatDate} from 'js/date'
    import Loading from "common/loading"
    import Loadinglist from "common/LoadingList"
    import Scroll from "common/scroll"
    import noData from "common/noData"
    import {mapState,mapMutations} from 'vuex' 
    export default {
        data(){
            return{
                tab:0,
                guideTab:0,
                row: true,     //loading文字水平显示
                isload: false, //是否正在加载
                scrollY: true,  //垂直滚动
                scrollX: false, //水平滚动
                pullup: true,   //上拉加载
                beforeScroll: true,
                bounce: false,  //动画
                more:true,      //下拉加载是否还有更多
                activeNames: [],
                applyList:[],
                recordList:[],
                guideList:[],
                page:1,
                showLoading:true
            }
        },
        created(){
            this.apply(); 
        },
         filters:{
             filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd');
            }
        },
        methods:{
            change(num){
                this.tab=num;
                this.page=1;
                this.more=true;
                this.isload=false;
                this.showLoading=true;
                if(num==0){
                    this.apply();
                }else if(num==1){
                   this.record();
                }else if(num==2){
                    this.guide();
                }
            },
            _getRecord(){
               if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                record(this.page).then(res=>{
                     if (res.data.error == 0) {
                            let end=res.data.content.end;
                            let arr=res.data.content.data;
                            arr.forEach((item)=>{
                                 item.recharge_time=this.switchDate(item.recharge_time)
                            })
                            let arrList=this.trans(arr,['recharge_time']);
                            arrList.forEach((item,index)=>{
                                if(this.recordList[ this.recordList.length-1].recharge_time==arrList[index].recharge_time){
                                    arrList[index].gameLists.forEach((item)=>{
                                        this.recordList[this.recordList.length-1].gameLists.push(item);
                                    })
                                }else{
                                    this.recordList=this.recordList.concat(arrList[index]);
                                }
                            })
                            this.isload = false;
                            if(end==1){
                                this.more = false;
                                this.isload = true;
                            }
                     }
                })
            },
            _getApply(){
               if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                apply(this.page)
                    .then(res => {
                    if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data;
                            this.isload = false;
                            this.applyList = this.applyList.concat(res);
                                if(this.page==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                    }
                })
            },
            record(){
                 record(this.page).then(res=>{
                        if (res.data.error == 0) {
                        this.showLoading=false;
                        var end=res.data.content.end;
                        let arr=res.data.content.data;
                        arr.forEach((item)=>{
                                item.recharge_time=this.switchDate(item.recharge_time)
                            })
                            this.recordList=this.trans(arr,['recharge_time']);
                        }else{
                            this.showLoading=false;
                        }
                        if(end==1){
                            this.more = false;
                            this.isload = true;
                        }
                })
            },
            apply(){
                apply(this.page).then(res=>{
                     if (res.data.error == 0) {
                        this.showLoading=false;
                        this.applyList=res.data.content.data;
                        let totalPage=res.data.content.totalPage;
                        if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                     }else{
                         this.showLoading=false;
                     }
                })
            },
            guide(){
                 getGuide().then(res=>{
                    if (res.data.error == 0) {
                        this.showLoading=false;
                        this.guideList=res.data.content;
                    }else{
                         this.showLoading=false;
                    }
                });
            },
            switchDate(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd');
            },
            trans(data,keys){
                let cache = {}
                return data.reduce((sum, cur) => {
                    let obj = {}
                    let key = keys.reduce((sum, key) => {
                        let tmp = obj[key] = cur[key]
                        delete cur[key]
                        return sum + tmp
                    }, '')

                    let i = cache[key]
                    if (i !== undefined) {
                        sum[i].gameLists.push(cur)
                    } else {
                        cache[key] = sum.length
                        sum.push(Object.assign(obj, {gameLists: [cur]}))
                    }
                    return sum
                }, [])
            },
            handleTab(num){
                this.guideTab=num;
            },
            goApply(item){
                this.$router.push({
                    path: '/rebate/apply',
                    query:{
                          id:item.id,
                          gameid:item.gameid,
                          roleid:item.roleid,
                          rolename:item.rolename,
                          server:item.servername,
                          serverid:item.serverid,
                          gamename:item.gamename,
                          account:item.username,
                          money:item.total,
                          date:item.date    
                    }
                });
            },
            goRecord(time,item){
                this.$router.push({
                    path: '/rebate/record',
                    query:{
                          "game_name":item.game_name,
                          "account":item.account,
                          "money":item.amount,
                          "recharge_time":time,
                          "server":item.server,
                          "rolename":item.role_name,
                          "create_time":this.switchDate(item.create_time),
                          "remarks":item.remarks,
                          "status":item.status,
                          "rebate_marks":item.rebate_marks,
                          "rebate_num":item.rebate_num
                    }
                });
            },
             ...mapMutations(['SET_RELOAD'])
        },
        computed:{
           ...mapState(['isReload'])
        },
        components:{
            Loading,
            Loadinglist,
            Scroll,
            noData
        },
        watch:{
             $route(){
                 if(this.isReload){
                    this.apply(); 
                    this.SET_RELOAD(false);
                 }
            }
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
.navbar{
    position:fixed;
    top:0;
    left:50%;
    transform:translatex(-50%);
    z-index:999;
    width:7.5rem;
    height:0.8rem;
    line-height:0.8rem;
    background:$color-focus;
    color:#fff;
    font-size:$font-size-l;
    text-align: center;
}
.placeholder{
    width:100%;
    height:0.8rem;
}
.type-tab{
    padding:0 0.2rem;
    margin-top:0.38rem;
    ul{
        display:flex;
        li{
            height:0.7rem;
            line-height:0.7rem;
            flex:1;
            text-align: center;
            font-size:$font-size-m;
            color:$color-focus;
            border:1px solid $color-focus;
            &:first-child{
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
            }
            &:nth-child(2){
                border-left:none;
                border-right:none;
            }
            &:last-child{
                border-top-right-radius: 25px;
                border-bottom-right-radius: 25px;
            }
            &.active{
                background:$color-focus;
                color:#fff;
            }
        }
    }
}
.warn{
    margin-top:0.1rem;
    p{
        color:#fe3d3d;
        font-size:$font-size-s;
        text-align: center;
    }
}
.container{
    margin-top:0.3rem;
    .apply{
        min-height:9rem;
        .list{
            padding:0.16rem 0.34rem 0.16rem 0.4rem;
            border-bottom:1px solid #f2f2f2;
            display:flex;
            justify-content: space-between;
            align-items: center;
            .list-l{
                display:flex;
                .avator{
                    width: 1.2rem;
                    height: 1.2rem;
                    background: #f5f5f5;
                }
                .info{
                    margin-left:0.2rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }
            }
            .list-r{
                display:flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .user{
                margin-bottom:0.1rem;
                color:#b3b3b3;
            }
            .name{
                font-size:$font-size-m;
                margin-bottom:0.16rem;
            }
            .num{
                font-size:$font-size-m;
                color:#217cfc;
            }
            .btn{
                width:1.4rem;
                line-height:0.52rem;
                border:1px solid $color-focus;
                border-radius:0.25rem;
                text-align: center;
                color:$color-focus;
                font-size:$font-size-m;
            }

        }
    }
    .record{
        min-height:9rem;
        .time{
            height:0.5rem;
            line-height:0.5rem;
            background:#f5f5f5;
            padding:0 0.3rem 0 0.36rem;
        }
        .game{
            padding:0.22rem 0.3rem 0 0.36rem;
            display:flex;
            .msg{
                margin-left:0.2rem;
                display: flex;
                flex:1;
                padding-bottom:0.2rem;
                border-bottom:1px solid #f2f2f2;
                .name{
                    font-size:$font-size-m;
                }
                .area,.role{
                    color:#8e8e93;
                }
                .msg-l{
                    flex:1;
                    display:flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .status{
                    span{
                        margin-top:0.08rem;
                        display:inline-block;
                        width:1.04rem;
                        height:1.04rem;
                        background-size:100% 100%;
                        &.wait{
                            @include bg-image('../../assets/image/word_daichuli');
                        }
                        &.success{
                            @include bg-image('../../assets/image/word_yifafang');
                        }
                        &.fail{
                            @include bg-image('../../assets/image/word_flsb');
                        }
                    }
                }
            }
            .avator{
                width:1.2rem;
                height:1.2rem;
                background:#f5f5f5;
                img{
                    width:100%;
                    height:100%;
                }
            }
        }
    }
    .guide{
         min-height:9rem;
        .line{
            width:100%;
            height:0.1rem;
            background:#f5f5f5;
        }
        .guide-tab{
            width:100%;
            height:0.76rem;
            line-height:0.76rem;
            display: flex;
            border-bottom:1px solid #f2f2f2;
            li{
                flex:1;
                text-align: center;
                font-size:$font-size-m;
                span{
                    display:inline-block;
                    height:100%;
                    transition: color 0.1s;
                }
                &.active{
                    color:$color-focus;
                    span{
                        border-bottom:2px solid $color-focus;
                    }
                }
            }
        }
        .img{
            margin-top:.2rem;
        }
    }
}
</style>